<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">

      <el-button class="filter-item" type="primary" icon="el-icon-edit"
                 @click="handleAdd">新增
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" min-width="100" label="代理人姓名" prop="agentName"/>
      <el-table-column align="center" min-width="100" label="代理人编码" prop="agentNo"/>
      <el-table-column align="center" min-width="100" label="代理人身份证号" prop="agentID"/>
      <el-table-column align="center" min-width="100" label="收款账号" prop="account"/>
      <el-table-column align="center" min-width="100" label="账号名称" prop="accountName"/>
      <el-table-column align="center" min-width="100" label="所属银行代码" prop="bankCode"/>
      <el-table-column align="center" min-width="100" label="开户联行号" prop="interBankNo"/>
      <el-table-column align="center" min-width="100" label="手机号" prop="mobile"/>
      <el-table-column align="center" min-width="100" label="住址" prop="address"/>
      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     @click="handleEdit(scope.row)">修改
          </el-button>
          <el-button type="danger" size="mini"
                     @click="doDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
    @pagination="getList"/>
    <!-- 分配订单对话框 -->
    <el-dialog :visible.sync="editDialogVisible"  :title="textMap[dialogStatus]">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="left"
               label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="代理人姓名" prop="agentName">
          <el-input v-model="editForm.agentName"/>
        </el-form-item>
        <el-form-item label="代理人编码" prop="agentNo">
          <el-input v-model="editForm.agentNo" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="代理人身份证号" prop="agentID">
          <el-input v-model="editForm.agentID" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="收款账号" prop="account">
          <el-input v-model="editForm.account" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="账号名称" prop="accountName">
          <el-input v-model="editForm.accountName" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="所属银行代码" prop="bankCode">
          <el-input v-model="editForm.bankCode" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="开户联行号" prop="interBankNo">
          <el-input v-model="editForm.interBankNo" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editForm.mobile" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="editForm.address" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="doCreate">确定</el-button>
        <el-button v-else type="primary" @click="doEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

    const FETCH_PAGE = 'agentman.html'
    const FETCH_URL = {
      LIST: `${FETCH_PAGE}?op=list`,
      CREATE: `${FETCH_PAGE}?op=add`,
      IMPORT: `${FETCH_PAGE}?op=batchadd`,
      EDIT: `${FETCH_PAGE}?op=chg`,
      DELETE: `${FETCH_PAGE}?op=del`,
    }

    export default {
        name: 'bank',
        components: {Pagination},
        filters: {},
        data() {
            return {
                list: [],
                total: 0,
                listLoading: true,
                listQuery: {
                     page: 1,
                     limit: 20,
                },
                editForm: {
                  agentName: undefined,
                  agentNo: undefined,
                  agentID: undefined,
                  account: undefined,
                  accountName: undefined,
                  bankCode: undefined,
                  interBankNo: undefined,
                  mobile: undefined,
                  address: undefined,
                },
                editFormRules: {
                  agentName: [{required: true, message: '代理人姓名不可为空', trigger: 'blur'}],
                  agentNo: [{required: true, message: '代理人编码不可为空', trigger: 'blur'}],
                  account: [{required: true, message: '收款账号不可为空', trigger: 'blur'}],
                  accountName: [{required: true, message: '账号名称不可为空', trigger: 'blur'}],
                  bankCode: [{required: true, message: '所属银行代码不可为空', trigger: 'blur'}],
                },
                editDialogVisible: false,
              dialogStatus: undefined,
              textMap: {
                update: '编辑',
                create: '创建'
              },
              editIndex: undefined,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                doGet(FETCH_PAGE.LIST, {}).then(response => {
                    this.list = response.rows
                    this.total = response.rows.length
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            handleAdd() {
                this.editForm.agentName = undefined
                this.editForm.agentNo = undefined
                this.editForm.agentID = undefined
                this.editForm.account = undefined
                this.editForm.accountName = undefined
                this.editForm.bankCode = undefined
                this.editForm.interBankNo = undefined
                this.editForm.mobile = undefined
                this.editForm.address = undefined
                this.editDialogVisible = true
                this.dialogStatus = 'create'
                this.$nextTick(() => {
                    this.$refs['editForm'].clearValidate()
                })
            },
          doEdit() {
            this.$refs['editForm'].validate(valid => {
              if (valid) {
                let sendData = {
                  ...this.editForm,
                }
                doGet(FETCH_URL.EDIT, sendData)
                  .then(response => {
                    this.getList()
                    this.editDialogVisible = false
                    this.list[this.editIndex] = this.editForm
                    this.$notify.success({
                      title: '成功',
                      message: '修改代理人信息成功'
                    })
                  })
                  .catch(response => {
                    this.$notify.error({
                      title: '失败',
                      message: response.message
                    })
                  })
              }
            })
          },
          doCreate() {
            this.$refs['editForm'].validate(valid => {
              if (valid) {
                let sendData = {
                  ...this.editForm,
                }
                doGet(FETCH_URL.CREATE, sendData)
                  .then(response => {
                    this.getList()
                    this.editDialogVisible = false
                    this.$notify.success({
                      title: '成功',
                      message: '添加代理人信息成功'
                    })
                  })
                  .catch(response => {
                    this.$notify.error({
                      title: '失败',
                      message: response.message
                    })
                  })
              }
            })
          },
          doDelete(row) {
            doGet(FETCH_URL.DELETE, {agentNo:row.agentNo})
              .then(response => {
                this.$notify.success({
                  title: '成功',
                  message: '删除代理人信息成功'
                })
                const index = this.list.indexOf(row)
                this.list.splice(index, 1)
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          },
          handleEdit(row) {
            this.editForm = Object.assign({}, row)
            this.editIndex = this.list.indexOf(row)
            this.dialogStatus = 'update'
            this.editDialogVisible = true
            this.$nextTick(() => {
              this.$refs['editForm'].clearValidate()
            })
          },
        }
    }
</script>
